<template>
	<view class="fx">
		<view class="top">
			<JyStatusBar :bgColor="'#4174FD'"></JyStatusBar>
			<JyTitleBar :title="title" :color="'#fff'" :bgColor="'#4174FD'"
				:hasArrow="true" />
		</view>
		<view class="grade-class">
			<view class="show-name" @click="showClassModal">
				<view style="margin-right: 10rpx;">
					{{gradeName}}
				</view>
				<u-icon name="arrow-down" color="#fff" v-if="type != 'classRank'"></u-icon>
			</view>
		</view>
		<view class="main-box">
			<view class="top-tab" v-if="type != 'classRank'">
				<view :class="['tab-item', activeTab == 'all' ? 'active' : '']"
					@click="changeTab('all')">
					综合分析
				</view>
				<view v-for="item in courseList" :key="item.courseId"
					:class="['tab-item', activeTab == item.courseId ? 'active' : '']"
					@click="changeTab(item.courseId)">
					{{item.courseName}}
				</view>
			</view>
			<view class="top-tab" v-else>
				<view :class="['tab-item active']">
					{{courseName}}
				</view>
			</view>
			
			<view class="white-box">
				<!-- 年级综合分析 -->
				<view class="grade-all num-box"
					v-if="analysisType == 'gradeAll'">
					<view class="num-box-item">
						<view class="num">{{info.classNum}}</view>
						<view class="desc">参与班级</view>
					</view>
					<view class="num-box-item">
						<view class="num">{{info.studentNum}}</view>
						<view class="desc">参与人数</view>
					</view>
					<view class="num-box-item">
						<view class="num">{{info.courseNum}}</view>
						<view class="desc">考试科目</view>
					</view>
				</view>
				<!-- 年级 单科 分析 -->
				<view class="grade-course num-box"
					v-if="analysisType == 'gradeSingle'">
					<view class="num-box-item">
						<view class="num">{{info.middleScore}}</view>
						<view class="desc">中位分</view>
					</view>
					<view class="num-box-item">
						<view class="num">{{info.highestScore}}</view>
						<view class="desc">最高分</view>
					</view>
					<view class="num-box-item">
						<view class="num">{{info.lowestScore}}</view>
						<view class="desc">最低分</view>
					</view>
					<view class="num-box-item">
						<view class="num">{{info.averageScore}}</view>
						<view class="desc">平均分</view>
					</view>
				</view>
				<!-- 班级级综合分析 -->
				<view class="class-all num-box"
					v-if="analysisType == 'classAll'">
					<view class="num-box-item">
						<view class="num">{{info.averageScore}}</view>
						<view class="desc">平均分</view>
					</view>
					<view class="num-box-item">
						<view class="num">{{info.highestScore}}</view>
						<view class="desc">最高分</view>
					</view>
					<view class="num-box-item">
						<view class="num">{{info.lowestScore}}</view>
						<view class="desc">最低分</view>
					</view>
				</view>
				<!-- 班级单科分析 -->
				<view class="class-course num-box"
					v-if="analysisType == 'classSingle'">
					<view class="average">
						<view class="red-num">{{info.averageScore}} <text
								class="red-desc">分</text></view>
						<view class="desc">平均分</view>
					</view>
					<view class="num-box-item">
						<view class="num">{{info.middleScore}}</view>
						<view class="desc">中位分</view>
					</view>
					<view class="num-box-item">
						<view class="num">{{info.highestScore}}</view>
						<view class="desc">最高分</view>
					</view>
					<view class="num-box-item">
						<view class="num">{{info.lowestScore}}</view>
						<view class="desc">最低分</view>
					</view>
				</view>
			</view>

			<!-- 年级综合分析 -->
			<view v-show="analysisType == 'gradeAll'">
				<view class="white-box">
					<view class="chart">
						<view class="analysis-title">
							总平均分
						</view>
						<view class="charts-box">
							<qiun-data-charts type="column" :opts="opts1"
								canvasId="canvascolumn001" :canvas2d="true"
								:chartData="chartData1" />
						</view>
					</view>
					<view class="num-list">
						<view class="gray-title">
							<view class="gray-title-item w-115">排名</view>
							<view class="gray-title-item w-155">班级</view>
							<view class="gray-title-item w-75">平均分</view>
						</view>
						<view class="rank-list">
							<view class="rank-list-item"
								v-for="(item, index) in allAverageListShow"
								:key="item.classId">
								<view
									:class="['w-115 text-center rank-list-item-info', `rank-${item.rank}`]">
									{{item.rank == 1 || item.rank == 2 ? '' : item.rank}}
								</view>
								<view
									class=" text-center w-155 rank-list-item-info">
									{{item.className}}
								</view>
								<view
									class="text-center w-75 rank-list-item-info">
									{{item.averageScore}}
								</view>
							</view>
							<view v-if="info.allAverageList.length > 3">
								<view v-if="showMore1" class="show-more"
									@click="showMore1 = !showMore1">
									收起 <u-icon name="arrow-up" size="10"
										style="margin-left: 16rpx;"
										color="#4174FD">
									</u-icon>
								</view>
								<view v-else class="show-more"
									@click="showMore1 = !showMore1">
									展开 <u-icon name="arrow-down" size="10"
										style="margin-left: 16rpx;"
										color="#4174FD">
									</u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="white-box">
					<view class="chart">
						<view class="analysis-title">
							科目平均分
						</view>
						<view class="charts-box">
							<qiun-data-charts type="radar" :opts="opts2"
								canvasId="canvasradar001" :canvas2d="true"
								:chartData="chartData2" />
						</view>
					</view>
				</view>

				<view class="white-box">
					<view class="chart">
						<view class="analysis-title">
							排名分布
						</view>
						<view class="start-end">
							<view class="input-box">
								<view
									style="width:186rpx;height: 56rpx;border: 1rpx solid #cccccc;">

									<u-input v-model="start" border="surround"
										inputAlign="center" type="number"
										:customStyle="{padding: 0, height:'100%'}">
									</u-input>
								</view>
								<u-line color="#e5e5e5" :length="'24rpx'">
								</u-line>
								<view
									style="width:186rpx;height: 56rpx;border: 1rpx solid #cccccc;">

									<u-input v-model="end" border="surround"
										type="number"
										:customStyle="{padding: 0, height:'100%'}"
										inputAlign="center">
									</u-input>
								</view>
							</view>
							<view class="search-box">
								名
								<view class="view-btn" @click="getRankInfo">查看
								</view>
							</view>
						</view>
						<view class="charts-box">
							<qiun-data-charts type="column" :opts="opts3"
								canvasId="canvascolumn002" :canvas2d="true"
								:chartData="chartData3" />
						</view>
						<view class="num-list">
							<view class="gray-title">
								<view class="gray-title-item w-115">排名</view>
								<view class="gray-title-item w-80">班级</view>
								<view class="gray-title-item w-75">人数</view>
								<view class="gray-title-item w-75">比例</view>
							</view>
							<view class="rank-list">
								<view class="rank-list-item"
									v-for="(item, index) in rankListShow"
									:key="item.classId">
									<view
										:class="['w-115 text-center rank-list-item-info', `rank-${item.rank}`]">
										{{item.rank == 1 || item.rank == 2 ? '' : item.rank}}
									</view>
									<view
										class=" text-center w-80 rank-list-item-info">
										{{item.className}}
									</view>
									<view
										class="text-center w-75 rank-list-item-info">
										{{item.num}}
									</view>
									<view
										class="text-center w-75 rank-list-item-info">
										{{item.percent}}
									</view>
								</view>
								<view v-if="rankList.length > 3">
									<view v-if="showMore2" class="show-more"
										@click="showMore2 = !showMore2">
										收起 <u-icon name="arrow-up" size="10"
											style="margin-left: 16rpx;"
											color="#4174FD"></u-icon>
									</view>
									<view v-else class="show-more"
										@click="showMore2 = !showMore2">
										展开 <u-icon name="arrow-down" size="10"
											style="margin-left: 16rpx;"
											color="#4174FD"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>

			<!-- 年级单科分析 -->
			<view v-show="analysisType == 'gradeSingle'">
				<view class="white-box">
					<view class="chart">
						<view class="analysis-title">
							班级平均分
						</view>
						<view class="charts-box">
							<qiun-data-charts type="column" :opts="opts1"
								canvasId="canvascolumn003" :canvas2d="true"
								:chartData="chartData5" />
						</view>
					</view>
					<view class="num-list">
						<view class="gray-title">
							<view class="gray-title-item w-115">排名</view>
							<view class="gray-title-item w-155">班级</view>
							<view class="gray-title-item w-75">平均分</view>
						</view>
						<view class="rank-list">
							<view class="rank-list-item"
								v-for="(item, index) in averageListShow"
								:key="item.classId">
								<view
									:class="['w-115 text-center rank-list-item-info', `rank-${ item.rank }`]">
									{{item.rank == 1 || item.rank == 2 ? '' : item.rank}}
								</view>
								<view
									class=" text-center w-155 rank-list-item-info">
									{{item.className}}
								</view>
								<view
									class="text-center w-75 rank-list-item-info">
									{{item.averageScore}}
								</view>
							</view>
							<view v-if="info.averageList.length > 3">
								<view v-if="showMore1" class="show-more"
									@click="showMore1 = !showMore1">
									收起 <u-icon name="arrow-up" size="10"
										style="margin-left: 16rpx;"
										color="#4174FD">
									</u-icon>
								</view>
								<view v-else class="show-more"
									@click="showMore1 = !showMore1">
									展开 <u-icon name="arrow-down" size="10"
										style="margin-left: 16rpx;"
										color="#4174FD">
									</u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="white-box">
					<view class="chart">
						<view class="analysis-title">
							优秀率统计
						</view>
						<view class="charts-box">
							<qiun-data-charts type="column" :opts="opts2"
								canvasId="canvascolumn004" :canvas2d="true"
								:chartData="chartData6" />
						</view>
					</view>
					<view class="num-list x-scroll scroll">
						<view class="gray-title">
							<view
								class="gray-title-item w-115 scroll-title-item">
								班级
							</view>
							<view
								class="gray-title-item w-115 scroll-title-item"
								v-for="item in  info.lineList"
								:key="item.lineId">{{item.show}}</view>
						</view>
						<view class="rank-list ">
							<view class="rank-list-item "
								v-for="(item, index) in info.showList"
								:key="item.className">
								<view
									:class="['w-115 text-center rank-list-item-info scroll-item']">
									{{item.className}}
								</view>
								<view
									:class="['w-115 text-center rank-list-item-info scroll-item']"
									v-for="(it, _index) in item.resultList"
									:key="item.lineId">
									{{it.num}}({{it.percent}}%)
								</view>
							</view>
							<view v-if="info.showList.length > 3">
								<view v-if="showMore2" class="show-more"
									@click="showMore2 = !showMore2">
									收起 <u-icon name="arrow-up" size="10"
										style="margin-left: 16rpx;"
										color="#4174FD">
									</u-icon>
								</view>
								<view v-else class="show-more"
									@click="showMore2 = !showMore2">
									展开 <u-icon name="arrow-down" size="10"
										style="margin-left: 16rpx;"
										color="#4174FD">
									</u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="white-box">
					<view class="chart">
						<view class="analysis-title">
							分数分布
						</view>
						<view class="part">
							<view class="part-title">
								<view class="part-desc">分差选择：</view>
								<view class="part-num">{{part}}</view>
							</view>
							<u-slider v-model="part" blockSize="20" min="0"
								max="100" step="1" activeColor="#00C73D"
								inactiveColor="#f2f4fa" @change="partChange">
							</u-slider>
						</view>
						<view class="charts-box">
							<qiun-data-charts type="column" :opts="opts3"
								canvasId="canvascolumn005" :canvas2d="true"
								:chartData="chartData8" />
						</view>
					</view>
					<view class="num-list">
						<view class="gray-title">
							<view class="gray-title-item w-115">区间</view>
							<view class="gray-title-item w-115">人数</view>
							<view class="gray-title-item w-115">比例</view>
						</view>
						<view class="rank-list">
							<view class="rank-list-item"
								v-for="(item, index) in numListShow"
								:key="item.classId">
								<view
									:class="['w-115 text-center rank-list-item-info']">
									{{item.partName}}
								</view>
								<view
									class=" text-center w-155 rank-list-item-info">
									{{item.num}}
								</view>
								<view
									class="text-center w-75 rank-list-item-info">
									{{item.percent}}
								</view>
							</view>
							<view v-if="numList.length > 3">
								<view v-if="showMore3" class="show-more"
									@click="showMore3 = !showMore3">
									收起 <u-icon name="arrow-up" size="10"
										style="margin-left: 16rpx;"
										color="#4174FD">
									</u-icon>
								</view>
								<view v-else class="show-more"
									@click="showMore3 = !showMore3">
									展开 <u-icon name="arrow-down" size="10"
										style="margin-left: 16rpx;"
										color="#4174FD">
									</u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 班级综合分析 -->
			<view v-show="analysisType == 'classAll'">
				<view class="white-box">
					<view class="chart">
						<view class="analysis-title">
							班级科目平均分
						</view>
						<view class="charts-box">
							<qiun-data-charts type="radar" :opts="opts1"
								canvasId="canvasradar002" :canvas2d="true"
								:chartData="chartData4" />
						</view>
					</view>
				</view>

				<view class="white-box">
					<view class="analysis-title">
						成绩详情
					</view>
					<view class="num-list">
						<view class="rank-list">
							<view class="rank-list-item"
								v-for="(item, index) in studentListShow"
								:key="item.examStudentId">
								<view
									:class="['w-56 text-center rank-list-item-info', `rank-${item.classRank}`]">
									{{item.classRank == 1 || item.classRank == 2 ? '' : item.classRank}}
								</view>
								<view
									class=" text-center w-119 rank-list-item-info">
									{{item.studentName}}
								</view>
								<view
									class="text-center w-56 rank-list-item-info">
									{{item.score != 'null' ? item.score : '-'}}
								</view>
								<view
									class="text-center w-115 rank-list-item-info">
									<view class="un-remark" v-if="!item.remark">
										未备注
									</view>
									<view class="remark entry-remark-item"
										v-else @click="()=>showRemark(item)">
										<view class="remark-icon icon"></view>
										查看
									</view>
								</view>
							</view>
							<view v-if="info.studentList.length > 3">
								<view v-if="showMore1" class="show-more"
									@click="showMore1 = !showMore1">
									收起 <u-icon name="arrow-up" size="10"
										style="margin-left: 16rpx;"
										color="#4174FD">
									</u-icon>
								</view>
								<view v-else class="show-more"
									@click="showMore1 = !showMore1">
									展开 <u-icon name="arrow-down" size="10"
										style="margin-left: 16rpx;"
										color="#4174FD">
									</u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 班级单科分析 -->
			<view v-show="analysisType == 'classSingle'">

				

				<view class="white-box">
					<view class="chart">
						<view class="analysis-title">
							成绩分布
						</view>
						<view class="part">
							<view class="part-title">
								<view class="part-desc">分差选择：</view>
								<view class="part-num">{{part}}</view>
							</view>
							<u-slider v-model="part" blockSize="20" min="0"
								max="100" step="1" activeColor="#00C73D"
								inactiveColor="#f2f4fa" @change="partChange">
							</u-slider>
						</view>
						<view class="charts-box">
							<qiun-data-charts type="column" :opts="opts3"
								canvasId="canvascolumn007" :canvas2d="true"
								:chartData="chartData7" />
						</view>
						<view class="num-list">
							<view class="gray-title">
								<view class="gray-title-item w-115">区间</view>
								<view class="gray-title-item w-115">人数</view>
								<view class="gray-title-item w-115">比例</view>
							</view>
							<view class="rank-list">
								<view class="rank-list-item"
									v-for="(item, index) in numListShow"
									:key="item.classId">
									<view
										:class="['w-115 text-center rank-list-item-info']">
										{{item.partName}}
									</view>
									<view
										class=" text-center w-155 rank-list-item-info">
										{{item.num}}
									</view>
									<view
										class="text-center w-75 rank-list-item-info">
										{{item.percent}}
									</view>
								</view>
								<view v-if="numList.length > 3">
									<view v-if="showMore3" class="show-more"
										@click="showMore3 = !showMore3">
										收起 <u-icon name="arrow-up" size="10"
											style="margin-left: 16rpx;"
											color="#4174FD">
										</u-icon>
									</view>
									<view v-else class="show-more"
										@click="showMore3 = !showMore3">
										展开 <u-icon name="arrow-down" size="10"
											style="margin-left: 16rpx;"
											color="#4174FD">
										</u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="white-box">
					<view class="analysis-title">
						成绩详情
					</view>
					<view class="num-list">
						<view class="rank-list">
							<view class="rank-list-item"
								v-for="(item, index) in studentListShow"
								:key="item.examStudentId">
								<view
									:class="['w-56 text-center rank-list-item-info', `rank-${item.classRank}`]">
									{{item.classRank == 1 || item.classRank == 2 ? '' : item.classRank}}
								</view>
								<view
									class=" text-center w-119 rank-list-item-info">
									{{item.studentName}}
								</view>
								<view
									class="text-center w-56 rank-list-item-info">
									{{item.score}}
								</view>
								<view
									class="text-center w-115 rank-list-item-info">
									<view class="un-remark" v-if="!item.remark">
										未备注
									</view>
									<view class="remark entry-remark-item"
										v-else @click="()=>showRemark(item)">
										<view class="remark-icon icon"></view>
										查看
									</view>
								</view>
							</view>
							<view v-if="info.studentList.length > 3">
								<view v-if="showMore1" class="show-more"
									@click="showMore1 = !showMore1">
									收起 <u-icon name="arrow-up" size="10"
										style="margin-left: 16rpx;"
										color="#4174FD">
									</u-icon>
								</view>
								<view v-else class="show-more"
									@click="showMore1 = !showMore1">
									展开 <u-icon name="arrow-down" size="10"
										style="margin-left: 16rpx;"
										color="#4174FD">
									</u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
                <view class="white-box">
					<view class="chart">
						<view class="analysis-title">
							科目描述
						</view>

						<view class="remark-box">
							{{info.remark ? info.remark : '暂无描述~~'}}
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 选择班级 -->
		<u-picker :show="showClass" :columns="[columns]" keyName="className"
			@confirm="classConfirm" @cancel="showClass = false">
		</u-picker>

		<!-- modal -->
		<u-modal :show="modalVisible" :showConfirmButton="false">
			<view class="remark-content">
				<view class="close">
					<u-icon name="close" size="18"
						@click="modalVisible = false"></u-icon>
				</view>
				<view class="head">
					<view class="course-name">
						<!-- 						<view class="course">{{ info.courseInfo.courseName }}
						</view> -->
						<view class="name">{{ remarkInfo.studentName }}</view>
					</view>
					<view class="score" v-if="remarkInfo.score">
						<view class="num">{{ remarkInfo.score }}</view>
						<!-- {{ !info.courseInfo.useLevelFlag ? "分" : "" }} -->
					</view>
				</view>
				<view class="remark">
					<view class="head">
						<view class="icon"></view>
					</view>
					{{ remarkInfo.remark }}
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import JyTitleBar from "@/components/jyTitleBar.vue"
	import JyStatusBar from "@/components/jyStatusBar.vue"


	import {
		courseListId,
		classListId,
		analysisGradeAll, //年级级综合分析
		analysisGradeSingle, //年级单科分析
		analysisDistribution, //年级单科分析-分数分布
		analysisClassAll, //班级综合分析
		analysisClassSingle, //班级单科分析
		analysisClassDistribution, //班级单科分析-分数分布
		analysisGredeRank //年级综合分析-排名
	} from "@/pages/achievement/api/teacher.js"

	import {
		averageOpts, // 平均分柱状图
		rankOpts, //  排名分布柱状图
		numsOpts, //  成绩分布柱状图  & 分数分布柱状图
		percentOpts, // 优秀率柱状图
		radarOpts, // 雷达图配置
	} from "@/pages/achievement/static/js/chartOpts.js"

	import deepClone from '@/util/deepClone.js'

	export default {
		components: {
			JyStatusBar,
			JyTitleBar,
		},
		data() {
			return {
				// averageOpts, // 平均分柱状图
				// rankOpts, //  排名分布柱状图
				// numsOpts, //  成绩分布柱状图  & 分数分布柱状图
				// percentOpts, // 优秀率柱状图
				// radarOpts, // 雷达图配置
				title: '',
				type: '',
				gradeName: '',
				activeTab: 'all',
				courseName: '',
				examId: '',
				classId: '-1',
				info: {
					allAverageList: [],
					singleAverageList: [],
					averageList: [],
					showList: [],
					showList: [],
					lineList: [],
					studentList: [],
				},
				rankList: [],
				numList: [],
				courseList: [],
				showClass: false,
				columns: [],
				start: 1,
				end: 100,
				part: 20,
				showMore1: false,
				showMore2: false,
				showMore3: false,
				opts1: {},
				opts2: {},
				opts3: {},
				chartData1: {},
				chartData2: {},
				chartData3: {},
				chartData4: {},
				chartData5: {},
				chartData6: {},
				chartData7: {},
				chartData8: {},
				rankList: [],
				remarkInfo: {},
				modalVisible: false,
				timer: null
			}
		},
		computed: {
			analysisType() {
				if (this.activeTab == 'all' && this.classId == '-1') {
					return 'gradeAll'
				} else if (this.activeTab != 'all' && this.classId == '-1') {
					return 'gradeSingle'
				} else if (this.activeTab == 'all' && this.classId != '-1') {
					return 'classAll'
				} else if (this.activeTab != 'all' && this.classId != '-1') {
					return 'classSingle'
				}
			},
			rankListShow() {
				if (this.showMore2) {
					return this.rankList
				} else {
					let list = [...this.rankList]
					return list?.splice(0, 3)
				}
			},
			numListShow() {
				if (this.showMore3) {
					return this.numList
				} else {
					let list = [...this.numList]
					return list?.splice(0, 3)
				}
			},
			studentListShow() {
				if (this.showMore1) {
					return this.info.studentList
				} else {
					let list = [...this.info.studentList]
					return list?.splice(0, 3)
				}
			},
			allAverageListShow() {
				if (this.showMore1) {
					return this.info.allAverageList
				} else {
					let list = [...this.info.allAverageList]
					return list?.splice(0, 3)
				}
			},
			averageListShow() {
				console.log(this.info)
				if (this.showMore1) {
					return this.info.averageList
				} else {
					let list = [...this.info?.averageList]
					return list?.splice(0, 3)
				}
			},
		},
		onLoad(options) {
			if (options.type == 'classRank') {
				this.type = options.type
				this.activeTab = options.courseId
				this.title = options.name
				this.classId = options.classId
				this.gradeName = options.className
				this.courseName = options.courseName
				this.examId = options.examId
				this.getInfo()
			} else {
				this.activeTab = 'all'
				console.log(this.options)
				this.examId = options.examId
				this.title = options.name
				this.getCourseList()
				this.getClassList()
				this.getInfo()
			}

		},
		methods: {
			showClassModal(){
				if (this.type == 'classRank'){
					return 
				}
				this.showClass = true
			},
			showRemark(item) {
				this.remarkInfo = item
				this.modalVisible = true
			},
			async getCourseList() {
				const { data } = await courseListId(this.examId)
				this.courseList = data?.list
			},
			async getClassList() {
				const { data } = await classListId(this.examId)
				this.gradeName = data?.list[0].className.substring(0, 3)
				this.columns = [{ className: this.gradeName, classId: '-1' },
					...data
					?.list
				]
				console.log(this.columns)
			},
			classConfirm(data) {
				console.log(data)
				const classItem = data.value[0]
				this.classId = classItem.classId
				this.gradeName = classItem.className
				this.showClass = false
				this.activeTab = 'all'
				this.reset()
				this.$nextTick(() => {
					this.getInfo()
				})
			},
			async getInfo() {
				let data = {}
				if (this.analysisType == 'gradeAll') {
					this.getRankInfo()
					//  年级综合分析
					const postData = {
						examId: this.examId,
					}
					const resp = await analysisGradeAll(postData)
					data = resp.data
					this.opts1 = deepClone(averageOpts)
					this.chartData1 = {
						categories: data.allAverageList.map(item =>
							item.className),
						series: [{
							textColor: '#4275FD',
							data: data.allAverageList.map(
								item => item
								.averageScore)
						}]
					}
					this.opts2 = deepClone(radarOpts)
					this.chartData2 = {
						categories: data.singleAverageList.map(item =>
							`${item.courseName}(${item.fullScore})`),
						series: [{

								name: "年级科目平均分",
								// textColor: '#4275FD',
								data: data.singleAverageList.map(
									item => item
									.averageScore)
							},
							// {
							// 	name: "科目总分",
							// 	textSize: 0,
							// 	textColor: "#fff",
							// 	// show:false,
							// 	// labelShow: false,
							// 	data: data.singleAverageList.map(
							// 		item => item.fullScore)
							// },
						]
					}
					console.log(this.chartData2)
				} else if (this.analysisType == 'classAll') {
					//  班级综合分析
					const postData = {
						examId: this.examId,
						classId: this.classId
					}
					const resp = await analysisClassAll(postData)
					data = resp.data
					this.opts1 = deepClone(radarOpts)
					this.chartData4 = {
						categories: data.singleAverageList.map(item =>
							`${item.courseName}(${item.fullScore})`),
						series: [{

								name: "年级科目平均分",
								// textColor: '#4275FD',
								data: data.singleAverageList.map(
									item => item
									.averageScore)
							},
							// {

							// 	name: "科目卷面满分",
							// 	// textColor: '#4275FD',
							// 	data: data.singleAverageList.map(
							// 		item => item
							// 		.fullScore)
							// },
						]
					}
				} else if (this.analysisType == 'gradeSingle') {
					this.getDistribution()
					// 年级单科分析
					const postData = {
						examId: this.examId,
						courseId: this.activeTab
					}
					const resp = await analysisGradeSingle(postData)
					data = resp.data

					data.classNameList = data.gradeLine.classList.map(item =>
						item.className)
					data.lineList = data.gradeLine.gradeLineList.map(item => {
						return {
							show: item.show,
							lineId: item.lineId
						}
					})
					data.showList = data.gradeLine.classList.map(item => {
						return {
							className: item.className,
							resultList: data.lineList.map(line => {
								return item.gradeLineResult[
									line.lineId]
							})
						}
					})
					console.log(data)

					this.opts1 = deepClone(averageOpts)
					this.chartData5 = {
						categories: data.averageList.map(item =>
							item.className),
						series: [{
							textColor: '#4275FD',
							data: data.averageList.map(
								item => item
								.averageScore)
						}]
					}
					this.opts2 = deepClone(percentOpts)
					this.chartData6 = {
						categories: data.classNameList,
						series: data.gradeLine.gradeLineList.map(item => {
							return {
								name: item.show,
								data: data.gradeLine.classList.map(
									classObj => {
										return classObj
											.gradeLineResult[
												item.lineId]
											.num
									})
							}
						})
					}
					console.log(this.chartData2)


				} else if (this.analysisType == 'classSingle') {
					// 班级单科分析
					this.getClassDistribution()
					const postData = {
						examId: this.examId,
						courseId: this.activeTab,
						classId: this.classId
					}
					const resp = await analysisClassSingle(postData)
					data = resp.data
				}

				console.log(data)
				this.info = { ...this.info, ...data }
			},
			//  年级综合分析 排名
			async getRankInfo() {
				const postData = {
					examId: this.examId,
					start: this.start,
					end: this.end,
				}
				const { data } = await analysisGredeRank(postData)
				console.log(data)
				this.rankList = data?.rankList

				this.opts3 = deepClone(rankOpts)
				this.chartData3 = {
					categories: data.rankList.map(item =>
						item.className),
					series: [{
						textColor: '#FFA600',
						data: data.rankList.map(
							item => item
							.num)
					}]
				}
			},
			//  年级单科分析-分数分布
			async getDistribution() {
				const postData1 = {
					examId: this.examId,
					courseId: this.activeTab,
					part: this.part
				}
				const { data } = await analysisDistribution(postData1)
				console.log(data)
				this.numList = data.distributionList
				this.opts3 = deepClone(numsOpts)
				this.chartData8 = {
					categories: data.distributionList?.map(item =>
						item.partName),
					series: [{
						textColor: '#FFA600',
						data: data.distributionList?.map(
							item => item
							.num)
					}]
				}
			},
			//  班级级单科分析-分数分布
			async getClassDistribution() {
				const postData1 = {
					examId: this.examId,
					courseId: this.activeTab,
					classId: this.classId,
					part: this.part
				}
				const { data } = await analysisClassDistribution(postData1)
				console.log(data)
				this.numList = data.distributionList
				this.opts3 = deepClone(numsOpts)
				this.chartData7 = {
					categories: data.distributionList?.map(item =>
						item.partName),
					series: [{
						textColor: '#FFA600',
						data: data.distributionList?.map(
							item => item
							.num)
					}]
				}
			},
			changeTab(tab) {
				this.activeTab = tab
				this.reset()
				this.getInfo()
			},
			partChange(value) {
				console.log(value)
				if (this.timeout) {
					clearTimeout(this.timeout)
				}
				this.timeout = setTimeout(() => {
					console.log(value)
					if (this.analysisType == 'gradeSingle') {
						this.getDistribution()
					} else if (this.analysisType == 'classSingle') {
						this.getClassDistribution()
					}
				}, 500);
			},
			reset() {
				this.opts1 = {}
				this.opts2 = {}
				this.opts3 = {}
				this.chartData1 = {}
				this.chartData2 = {}
				this.chartData3 = {}
				this.chartData4 = {}
				this.chartData5 = {}
				this.chartData6 = {}
				this.chartData7 = {}
				this.chartData8 = {}
				this.info = {
					allAverageList: [],
					singleAverageList: [],
					averageList: [],
					showList: [],
					showList: [],
					lineList: [],
					studentList: [],
				}
				this.showMore1 = false
				this.showMore2 = false
				this.showMore3 = false
			}
		},
	}
</script>

<style lang="scss" scoped>
	.fx {
		height: 100vh;
		// overflow: hidden;

		.scroll {

			.gray-title,
			.rank-list {
				width: auto;
			}

			.gray-title {
				background: #fff;
				display: flex;
				justify-content: flex-start;

			}

			.scroll-item,
			.scroll-title-item {
				width: 230rpx;
			}

			.scroll-title-item {
				background: rgba(65, 116, 253, 0.08);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.grade-class {
			box-sizing: border-box;
			height: 176rpx;
			padding-bottom: 88rpx;
			background-color: #4174FD;


			.show-name {
				height: 88rpx;
				color: #ffffff;
				font-size: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

		}

		.main-box {
			height: calc(100% - 120rpx - 176rpx + 68rpx);
			overflow-y: scroll;
			box-sizing: border-box;
			background: #f2f4fa;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			padding: 20rpx 30rpx 160rpx 30rpx;
			margin-top: -68rpx;
		}

		.top-tab {
			width: 100%;
			height: 88rpx;
			overflow-x: scroll;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			margin-bottom: 20rpx;


			.tab-item {
				position: relative;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 30rpx;
				color: #999;
				padding: 0 24rpx;

				&.active {
					color: #4174FD;
					font-weight: 600;

					&::after {
						display: block;
						content: ' ';
						box-sizing: border-box;
						width: 30rpx;
						height: 6rpx;
						background: #4275fd;
						border-radius: 4rpx;
						position: absolute;
						bottom: 8rpx;
						left: calc(50% - 15rpx);
					}
				}

			}
		}

		.analysis-title {
			position: relative;
			z-index: 3;
			display: inline-block;
			height: 42rpx;
			line-height: 42rpx;
			font-size: 30rpx;
			font-weight: 600;
			padding-left: 16rpx;

			&::before {
				position: absolute;
				left: 0;
				top: calc(50% - 10rpx);
				display: block;
				content: ' ';
				width: 6rpx;
				height: 20rpx;
				background: #4174fd;
				border-radius: 4rpx;
			}

			&::after {
				position: absolute;
				top: 0;
				right: -22rpx;
				z-index: -1;
				display: block;
				content: ' ';
				width: 38rpx;
				height: 38rpx;
				background: url('@/pages/achievement/static/img/title-right.png') 0 0 no-repeat;
				background-size: 100% 100%;
			}
		}

		.white-box {
			width: 100%;
			box-sizing: border-box;
			background: #fafafa;
			border-radius: 32rpx;
			padding: 24rpx;
			margin-top: 20rpx;
		}

		.gray-title {
			width: calc(100% + 48rpx);
			height: 88rpx;
			margin-left: -24rpx;
			background: rgba(65, 116, 253, 0.08);

			.gray-title-item {
				display: inline-block;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 26rpx;
				font-weight: 600;
				color: #333333;


			}
		}

		.num-box {
			display: flex;
			justify-content: space-around;

			.num-box-item {
				box-sizing: border-box;
				position: relative;
				height: 140rpx;
				padding: 24rpx 0;

				.num {
					height: 56rpx;
					font-size: 40rpx;
					font-weight: 500;
					text-align: center;
					color: #333333;
					line-height: 56rpx;
				}

				.desc {
					height: 36rpx;
					opacity: 0.7;
					font-size: 26rpx;
					font-weight: 400;
					text-align: center;
					color: #999999;
					line-height: 36rpx;
				}

				&::after {
					display: block;
					content: ' ';
					width: 1rpx;
					height: 48rpx;
					background: #e5e5e5;
					border-radius: 2rpx;
					position: absolute;
					top: calc(50% - 12rpx);
					right: 0;

				}

				&:last-child {
					&::after {
						display: none;
					}
				}
			}
		}

		.grade-all {
			.num-box-item {
				width: 214rpx;
			}
		}

		.grade-course {
			.num-box-item {
				width: 160rpx;
			}
		}

		.class-all {
			.num-box-item {
				width: 160rpx;
			}
		}

		.class-course {
			flex-wrap: wrap;

			.average {
				width: 100%;
				flex: 2 0 100%;
				text-align: center;
				margin-bottom: 30rpx;

				.red-num {
					height: 90rpx;
					font-size: 64rpx;
					font-weight: 600;
					color: #fe4f54;
					line-height: 90rpx;
				}

				.red-desc {
					font-size: 26rpx;
					font-weight: 600;
					color: #fe4f54;
				}

				.desc {
					height: 36rpx;
					opacity: 0.7;
					font-size: 26rpx;
					font-weight: 400;
					text-align: center;
					color: #999999;
					line-height: 36rpx;
				}
			}

			.num-box-item {
				width: 160rpx;
			}
		}
	}

	.rank-list {
		width: calc(100% + 48rpx);
		margin-left: -24rpx;
		margin-top: 40rpx;

		.rank-list-item {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.rank-list-item-info {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 88rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.rank-1 {
				display: flex;
				justify-content: space-around;
				align-items: center;

				&:before {
					display: block;
					content: ' ';
					width: 48rpx;
					height: 48rpx;
					background: url('@/pages/achievement/static/img/first.png') 0 0 no-repeat;
					background-size: 100% 100%;
				}
			}

			.rank-2 {
				display: flex;
				justify-content: space-around;
				align-items: center;

				&:before {
					display: block;
					content: ' ';
					width: 48rpx;
					height: 48rpx;
					background: url('@/pages/achievement/static/img/secend.png') 0 0 no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}

	.show-more {
		height: 44x;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #4174FD;
		font-size: 24rpx;
	}

	.start-end {
		width: 100%;
		height: 56rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 24rpx;
	}

	.input-box {
		width: 482rpx;
		height: 56rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.u-input--radius {
			padding: 0;
			text-align: center;
		}
	}

	.search-box {
		width: 206rpx;
		height: 56rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.view-btn {
		width: 124rpx;
		height: 56rpx;
		border: 1rpx solid #4174fd;
		border-radius: 4rpx;
		line-height: 56rpx;
		font-size: 30rpx;
		text-align: center;
		color: #4174fd;
	}

	.charts-box {
		width: 100%;
		height: 600rpx;
	}

	.text-center {
		text-align: center;
	}

	.w-115 {
		width: 230rpx;
	}

	.w-155 {
		width: 310rpx;
	}

	.w-75 {
		width: 150rpx;
	}

	.w-80 {
		width: 160rpx;
	}

	.w-195 {
		width: 390rpx;
	}

	.w-56 {
		width: 112rpx;
	}

	.w-119 {
		width: 238rpx;
	}



	.x-scroll {
		width: 100%;
		overflow-x: scroll;
	}

	.un-remark {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 148rpx;
		height: 56rpx;
		border-radius: 4rpx;
		background: rgba(153, 153, 153, 0.08);
		color: #d8d8d8;
		font-size: 30rpx;
	}

	.entry-remark-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 148rpx;
		height: 56rpx;
		border-radius: 4rpx;
		font-size: 30rpx;

		.icon {
			width: 36rpx;
			height: 36rpx;
			margin: 6rpx 8rpx 0 0;
		}
	}

	.unremark {
		color: #4174fd;
		background: rgba(65, 116, 253, 0.08);

		.unremark-icon {
			background: url("@/pages/achievement/static/img/edit-icon.png") 0 0 no-repeat;
			background-size: 100% 100%;
		}
	}

	.remark {
		background: rgba(255, 137, 72, 0.08);
		color: #ff8948;

		.remark-icon {
			background: url("@/pages/achievement/static/img/info-icon.png") 0 0 no-repeat;
			background-size: 100% 100%;
		}
	}

	.remark-box {
		background: #f2f4fa;
		border-radius: 16rpx;
		padding: 24rpx;
		font-size: 26rpx;
		color: #666;
		line-height: 36rpx;
		margin: 24rpx 0 36rpx 0;
	}

	.part {
		.part-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;

			.part-desc {
				height: 36rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #666666;
				line-height: 36rpx;
			}

			.part-num {
				height: 48rpx;
				font-size: 34rpx;
				font-weight: 600;
				color: #00c73d;
				line-height: 48rpx;
			}
		}
	}
</style>


<style lang="scss">
	.remark-content {
		width: calc(100% + 100rpx);
		margin: -50rpx;
		background: url("@/pages/achievement/static/img/remark-title.jpg") 0 0 no-repeat;
		background-size: 100% 200rpx;
		padding: 32rpx;
		border-radius: 24rpx;

		.close {
			height: 36rpx;
			width: 100%;
			display: flex;
			justify-content: flex-end;
			margin-bottom: 32rpx;
		}

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.course-name {
			.course {
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 600;
				text-align: center;
				color: #333333;
				line-height: 50rpx;
				margin-bottom: 8rpx;
			}

			.name {
				height: 36rpx;
				font-size: 26rpx;
				font-weight: 400;
				text-align: center;
				color: #999999;
				line-height: 36rpx;
			}
		}

		.score {
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			font-size: 32rpx;
			color: #fe4f54;

			.num {
				font-size: 64rpx;
				font-weight: 600;
				text-align: center;
				color: #fe4f54;
			}
		}

		.remark {
			box-sizing: border-box;
			min-height: 178rpx;
			background: #f2f4fa;
			border-radius: 16rpx;
			margin-top: 28rpx;
			padding: 24rpx;

			.head {
				height: 42rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 30rpx;
				color: #4174fd;
				font-weight: 600;
				margin-bottom: 16rpx;

				.icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 16rpx;
					background: url("@/pages/achievement/static/img/chengji.jpg") 0 0 no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
</style>
